<template>
    <t-layout-page>
        <t-layout-page-item>
            <!-- table4 组件调用 -->
            <t-table4
                    title="用户数据表格"
                    :table="table"
                    :columns="table.columns"
                    :show-pagination="true"
                    :border="true"
                    :stripe="true"
                    :column-setting="true"
                    @row-click="handleRowClick"
                    @sort-change="handleSortChange"
            >
                <!-- 标题插槽 -->
<!--
                <template #title>
                    <h3>高级用户管理表格</h3>
                </template>
-->

                <!-- 工具栏插槽 -->
                <template #toolbar>
                    <t-button type="primary" @click="handleAdd">新增</t-button>
                    <t-button @click="handleRefresh">刷新</t-button>
                </template>
<!--                <template #status="{ scope, column, row }">
                    <el-tag :type="row.status === '1' ? 'success' : 'warning'">
                        {{ row.status === '1' ? '启用' : '禁用' }}
                    </el-tag>
                </template>-->
                <!-- 自定义单元格插槽 -->
                <template #default="scope">
                    <!-- 状态列自定义渲染 -->
<!--                    <template v-if="scope.column.prop == 'status'">
                        <el-tag :type="scope.row.status === '1' ? 'success' : 'warning'">
                            {{ scope.row.status === '1' ? '启用' : '禁用' }}
                        </el-tag>
                    </template>-->
                    <!-- 操作列 -->
                    <template v-if="scope.column.prop === 'action'">
                        <t-button size="small" @click.stop="handleEdit(scope.row)">编辑</t-button>
                        <t-button size="small" type="danger" @click.stop="handleDelete(scope.row)">删除</t-button>
                    </template>
                </template>
            </t-table4>
        </t-layout-page-item>
    </t-layout-page>
</template>

<script setup lang="tsx">
// 表格配置项
import {ElTag} from "element-plus";

const table = {
    title: "用户数据表格",
    toolbar:[
        {
            text: '拉单',
            click: 'dialog://oms/order/original/pull',
        }
        ,[{
            text: '下推',
            click: 'post:///c/oms/originalorder/pushdown',
            param: 'id',
            needSelect: true, refresh: true
        },{
            text: '下推规则',
            click: 'post:///c/oms/originalorder/pushdown',
            param: 'id',
        }],{
            text: '审核',
            click: 'show://blog/special/add?type=2',
            type: 'primary',
            needSelect: true,multiSelect: true, refresh: true
        },
        [{
            click: 'post:///c/oms/originalorder/tonormal',
            text: '重新激活',title: '转为正常订单', needSelect: true,multiSelect: true,refresh: true
        }, {
            // click: 'post:///c/oms/originalorder/toerror',
            click: 'dialog://oms/order/original/toerror.vue',
            text: '锁定订单',
            title: '转为异常订单', needSelect: true,multiSelect: true, refresh: true
        }],
        {
            click: 'floor://oms/order/platform/detail',
            text: '下查',
            type: 'success', needSelect: true
        },
        {
            click: 'dialog://TTable/base/log2',
            text: '日志', needSelect: true
        },
        {
            click: 'floor://oms/order/platform/detail',
            text: '进度',needSelect: true
        },
        {
            click: 'dialog:///c/oms/originalorder/pull?type=1',
            text: '备注', needSelect: true
        },{
            text: '刷新', refresh: true
        }
    ],
  firstColumn: [
    {type: 'index', fixed: true,width: 40},
    {type: "selection",width: 40}
  ],
    data: [
        { id: "1", name: "张三", date: "2019-09-25", status: "1", address: "广东省广州市天河区" },
        { id: "2", name: "李四", date: "2019-09-26", status: "0", address: "上海市浦东新区" },
        { id: "3", name: "王五", date: "2019-09-27", status: "1", address: "北京市海淀区" },
        { id: "4", name: "赵六", date: "2019-09-28", status: "1", address: "深圳市南山区" }
    ],
    currentPage: 1,
    pageSize: 10,
    total: 4,
    columns:[
        { prop: "name", label: "姓名", minWidth: "100", sortable: true },
        { prop: "date", label: "日期", minWidth: "180", sortable: true },
        { prop: "status", slotName: 'status', label: "状态", minWidth: "80",
            render: (h: any, row: any) => {
                return h(ElTag, {
                    type: row.status === '1' ? 'success' : 'warning'
                }, () => row.status === '1' ? '启用' : '禁用')
            }
        },
        { prop: "address", label: "地址", minWidth: "220" },
        { prop: "action", label: "操作", minWidth: "160", fixed: "right" }
        ]
};

// 事件处理函数
const handleRowClick = (row: any) => {
    console.log("点击了行:", row);
};

const handleSortChange = (column: any) => {
    console.log("排序变更:", column);
    // 实际应用中这里会触发数据重新排序
};

const handleAdd = () => {
    console.log("点击新增按钮");
};

const handleRefresh = () => {
    console.log("点击刷新按钮");
};

const handleEdit = (row: any) => {
    console.log("编辑:", row);
};

const handleDelete = (row: any) => {
    console.log("删除:", row);
};
</script>
<!--
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table title="基本用法" :table="table" :columns="table.columns" :isShowPagination="false" />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
const table = {
  // 接口返回数据
  data: [
    {
      id: "1",
      date: "2019-09-25",
      date1: "2019-09-26",
      name: "张三",
      status: "2",
      address: "广东省广州市天河区"
    },
    {
      id: "2",
      date: "2019-09-26",
      date1: "2019-09-27",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2"
    },
    {
      id: "3",
      date: "2019-09-26",
      date1: "2019-09-28",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2"
    },
    {
      id: "4",
      date: "2019-09-26",
      date1: "2019-09-29",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2"
    }
  ],
  // 表头数据
  columns: [
    { prop: "name", label: "姓名", minWidth: "100" },
    { prop: "date", label: "日期", minWidth: "180" },
    { prop: "status", label: "状态", minWidth: "80" },
    { prop: "address", label: "地址", minWidth: "220" }
  ]
};
</script>
-->
